import React from 'react';
import Taro from '@tarojs/taro';
import {View, Image, Text, Navigator, Block} from '@tarojs/components'
import {Good} from '../../../../utils/server.interface'
import {RESOURCE_URL, TARO_ENV} from "../../../../constants/api";
import Float from '../../../../components/float/float';
import {platform} from '../../../../utils/platform-settting.service';
import './index.scss'

const BigGoodsBox: React.FC<{ isUser: boolean; pkeys?: ''; data: Good[] }> = (props) => {
  const dataColor = Taro.getStorageSync('colorData');
  const getUrl = (url) => {
    if (props.pkeys) {
      url += '&pkeys=' + props.pkeys
    }
    return url
  }

  return (
    <View className='bigGoodsBox'>
      {props.data.map((item: any) => <Navigator key={item.id} className='good-item'
        url={getUrl(item.url)}
        hoverClass='none'
      >
        <View className='img-box'>
          <Image lazyLoad src={item.img} mode='aspectFill' className='img' />
          {!((process.env.P_ENV === 'vc' || process.env.P_ENV === 'kunxin') && item.is_free_visit && item.is_free_visit == 1) &&
          <Block>
            {!!item.is_activity ? <Block>
              <Text className='discount' style={`background-color: ${dataColor.priceColor};`}>拼团价</Text>
            </Block> : <Block>
              {!!item.discount &&
              <Text className='discount' style={`background-color: ${dataColor.priceColor};`}><Text
                className='font-family-price'
              >{item.discount}</Text>折</Text>}
            </Block>}
          </Block>}
        </View>
        <View className='big-right'>
          <View className='big-right-title'>
            <View className='name'>{item.name}</View>
            {item.sub_title && <View className='subTitle'>{item.sub_title}</View>}
            {item.labels && item.labels.length > 0 && <View className='labels'>
              {item.labels && item.labels.length > 0 && item.labels.map((items, index) => <Text
                className={`label ${TARO_ENV + 'label'}`}
                style={`border: 1Px solid ${dataColor.titleColor};color: ${dataColor.titleColor}`}
              >{items}</Text>)}
            </View>}
            {!!platform.info.is_show_sales_volume && !!item.salesVolume &&
            <View className='salesVolume'>销量：{item.salesVolume}笔</View>}
          </View>
          <View className='bottom-salesVolume-price'>
            <View className='left goods-like-left'>
              <Block>
                {item.is_free_visit && item.is_free_visit == 1 && (process.env.P_ENV === 'vc' || process.env.P_ENV === 'kunxin') ?
                  <View className='price' /> :
                  <Block>
                    {item.can_zero_buy != 1 ? <Block>
                        <View className='price'>
                          <View className='view-inline'>
                            <Text className='mark view-inline' style={`color: ${dataColor.priceColor}`}>¥</Text>
                            <View className='mark main view-inline' style={`color: ${dataColor.priceColor}`}>
                              <Float value={item.price || 0} />
                            </View>
                          </View>
                          {!!item.market_price &&
                          <View className='m-min-b market-price view-inline'
                            style={`color: ${dataColor.originalPriceColor}`}
                          >¥{item.market_price || 0}</View>}
                        </View>
                      </Block> :
                      <Block>
                        <Text className='symbol0' style={`color: ${dataColor.priceColor}`}>¥</Text>
                        <Text className='number' style={`color: ${dataColor.priceColor}`}>0</Text>
                        <View
                          className='old inline'
                          style={`color: ${dataColor.priceColor}`}
                        >
                          ￥<Float value={item.price} />
                        </View>
                        {!!item.market_price &&
                        <View className='m-min-b market-price view-inline'
                          style={`color: ${dataColor.originalPriceColor}`}
                        >¥{item.market_price || 0}</View>}
                        <Image className='zero-buy'
                          src={RESOURCE_URL + "/resources/weapp/images/zero.png"}
                        /></Block>}
                  </Block>}
                {item.is_free_visit && item.is_free_visit == 1 && (process.env.P_ENV === 'vc' || process.env.P_ENV === 'kunxin') ?
                  <View className='recommendation-block-item-bottom-right'>
                    <View className='snapped-up'>免费入园</View>
                  </View> : <View className='recommendation-block-item-bottom-right'>
                    {/* 用户 */}
                    {(props.isUser || !item.commission_price) &&
                    <View className='snapped-up'>{item.is_activity == 1 ? '立即拼团' : '立即抢购'}</View>}
                    {/* 达人 */}
                    {!props.isUser && !!item.commission_price && <View className='share-earn'>
                      <View className='share-left'>分享赚</View>
                      <View className='price'>
                        <Text>￥</Text>
                        <View className='true-price-share font-family-price'>
                          <Float value={item.commission_price || 0} />
                        </View>
                      </View>
                    </View>}
                  </View>}
              </Block>
            </View>
          </View>
        </View>
      </Navigator>)}
    </View>
  )
}
BigGoodsBox.defaultProps = {
  data: [],
  pkeys: '',
  isUser: true
}

export default BigGoodsBox
